<template>
  <div class="page" v-loading="loading">
    <el-table :data="promptList" class="table" style="width: 100%">
      <el-table-column prop="prompt" label="提示词模板">
        <template slot-scope="scope">
          <span class="prompt">{{ scope.row.prompt }}</span>
        </template>
      </el-table-column>
      <el-table-column label="默认参数">
        <template slot-scope="scope">
          <div>姓名: <el-tag>{{ scope.row.name }}</el-tag>  </div>
          <div class="margin-10">性别:{{ scope.row.sex }}</div>
          <div class="margin-10">所在城市:{{ scope.row.city }}</div>
          <div class="margin-10">职业:{{ scope.row.job }}</div>
          <div class="margin-10">风格:{{ scope.row.style }}</div>
          <div class="margin-10">联系方式:{{ scope.row.phoneNumber }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="industryBackground" label="行业背景">
      </el-table-column>
      <el-table-column prop="skill" label="默认技能"> </el-table-column>
      <el-table-column prop="workflow" label="默认工作流"> </el-table-column>
      <el-table-column label="mk中的角色设定">
        <template slot-scope="scope">
          <span class="prompt">{{ scope.row.system }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="wechatNum" label="关联的微信"> </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <div class="option">
            <el-button type="danger" @click="clickDelete(scope.row)"
              >删除</el-button
            >
            <el-button type="primary" @click="editPrompt(scope.row.id)"
              >编辑</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-button
      class="addmodel"
      size="small"
      type="primary"
      @click="editPrompt(0)"
      >添加</el-button
    >
  </div>
</template>

<script>
import { post } from "@/common/request";
import { toast } from "@/common/tools";
import { mapState } from "vuex";
import createVue from "./components/create.vue";
import editVue from "./components/edit.vue";
import scanVue from "./components/scan.vue";
import syncVue from "./components/sync.vue";
export default {
  components: {
    createVue,
    editVue,
    scanVue,
    syncVue,
  },
  data() {
    return {
      loading: false,
      // 提示词列表
      promptList: [],
      // 搜索到的知识库的表单
      zskForm: {
        // 知识库的id
        id: "",
        // 知识库的名字
        name: "",
        // 知识库的描述
        desc: "",
        // 关联的应用数量
        application_mapping_count: 0,
        // 知识库的文档数量
        document_count: 0,
      },
      // 切换知识库对话框是否显示
      zskDialog: false,
      // 管理应用对话框是否显示
      applicationDialog: false,
      syncDialog: false,
      options: ["在线", "离线"],
      status: "",
      list: [],
      key: "",
      isEmpty: false,
      syncId: "",
      pageNum: 1,
      pageSize: 15,
      total: 0,
      id: "",
    };
  },
  created() {
    this.list = [];
    this.getList();
  },

  watch: {
    loginoutRandom() {
      this.reStart();
    },
  },

  computed: {
    ...mapState({
      userPackageInfo: (state) => state.userPackageInfo,
      loginoutRandom: (state) => state.loginoutRandom,
    }),
  },

  methods: {
    callback() {
      this.reStart();
      this.$refs.syncRef.setTime();
      this.$refs.syncRef.setTime1();
      this.syncDialog = true;
    },

    reStart() {
      this.pageNum = 1;
      this.list = [];
      this.getList();
    },

    // 同步失败，重新扫码登录
    reLogin() {
      this.syncDialog = false;
      this.scanDialog = true;
      setTimeout(() => {
        this.$refs.scanRef.reLogin();
      }, 500);
    },

    // 点击切换知识库
    clickChangeZSK(item) {
      this.zskDialog = true;
      this.weChatInfo = item;
      console.log("点击切换知识库", this.weChatInfo);
    },
    // 点击编辑提示词按钮
    editPrompt(id) {
      // 获取目标路由的完整路径
      const targetPath = `#/admin_edit_prompt?id=${id}`;

      // 构造完整的 URL
      const baseUrl = window.location.origin;
      const fullUrl = `${baseUrl}${targetPath}`;

      // 使用 window.open 方法在新标签页中打开 URL
      window.open(fullUrl, "_blank");
    },
    // 点击编辑提示词按钮
    clickDelete(item) {
      if (item.wechatNum > 0) {
        toast(1, "该提示词正在被使用，无法删除");
        return;
      }
      this.loading = true;
      this.$post("/front/prompt/delete", {
        id: item.id,
      })
        .then((res) => {
          this.loading = false;
          if (res.data.code === 0) {
            toast(0, "删除成功");
            this.getList();
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },

    // 获取提示词列表
    getList() {
      this.$post("/front/prompt")
        .then((res) => {
          if (res.data.code === 0) {
            this.promptList = res.data.obj;
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },

    // 删除微信客服
    handleDelete(item) {
      if (this.id === item.id) return;
      this.id = item.id;
      this.$alert(`确认删除微信${item.wechatName}?`, "删除微信", {
        confirmButtonText: "确定",
        confirmButtonClass: "confirmButtonClass",
        cancelButtonText: "取消",
        showCancelButton: true,
        showClose: false,
        callback: (action) => {
          console.log(action);
          this.id = "";
          if (action === "confirm") {
            //删除微信代码
            this.$post("/front/userWechat/deleteWechat", {
              ids: item.id,
            }).then((res) => {
              if (res.data.code === 0) {
                toast(0, "删除成功");
                this.list = this.list.filter((o) => {
                  return o.id != item.id;
                });
                this.total -= 1;
                this.isEmpty = this.list.length === 0;
                this.$store.dispatch("getUserPackageInfo");
              } else {
                toast(1, res.data.msg);
              }
            });
          }
        },
      });
    },
    // 点击确定按钮,点击切换知识库对话框的确定按钮
    clickConfirmChangeZSK() {
      this.zskDialog = false;
      const data = {
        wechat: this.weChatInfo,
        zsk: this.zskForm,
      };
      console.log("data", data);

      post("/front/dataset/changeZSK", data)
        .then((res) => {
          if (res.data.code === 0) {
            toast(0, "切换成功");
            this.getList();
          } else {
            toast(0, res.data.obj.msg);
          }
        })
        .catch(() => {
          toast(1, "切换失败");
        });
    },
    // 选择搜索出来的知识库
    handleSelect(item) {
      console.log("handleSelect", item);
      this.zskForm = item;
    },
    // 搜索知识库
    searchZSK(queryString, cb) {
      console.log("queryString", queryString);
      this.$post("/front/dataset/searchZSK", {
        name: queryString,
      }).then((res) => {
        if (res.data.code === 0) {
          if (res.data.obj.records) {
            const result = [];
            for (let i = 0; i < res.data.obj.records.length; i++) {
              result.push(res.data.obj.records[i]);
              result[i].value = res.data.obj.records[i].name;
            }
            cb(result);
            return;
          }
        }
      });
      cb([]);
    },
    // 清空会话id
    clearSessionId(item) {
      this.loading = true;
      this.$post("/weChatController/clearSessionId", {
        id: item.id,
      })
        .then((res) => {
          this.loading = false;
          if (res.data.code === 0) {
            toast(0, "清空成功");
          } else {
            toast(1, res.data.msg);
          }
        })
        .catch(() => {
          this.loading = false;
          toast(1, "清空失败");
        });
    },
  },
};
</script>

<style lang="less" scoped>
:deep(.el-icon-search:before) {
  color: #aaa !important;
}
:deep(.el-icon-circle-close) {
  font-size: 18px !important;
  color: #409eff !important;
}
.page {
  width: 100%;
  height: 100%;
  overflow-y: hidden;
  padding: 10px 10px 0;
}
.useridtitle {
  width: 50px;
  line-height: 40px;
  text-align: center;
  font-weight: 600;
}
.userid {
  width: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 13px;
  padding: 0 10px;
}
.wechatid {
  width: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 13px;
  padding: 0 10px;
}
.wechatnametitle {
  width: 180px;
  line-height: 40px;
  text-align: center;
  font-weight: 600;
}
.wechatstatustitle {
  width: 100px;
  line-height: 40px;
  text-align: center;
  font-weight: 600;
}
.wechatname {
  width: 180px;
  line-height: 50px;
  text-align: center;
  font-size: 13px;
  padding: 0 10px;
}
.zhishikid {
  margin: 10px 0;
}
:deep(.el-table) {
  overflow: scroll;
}
.el-table::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}
.caozuo {
  display: flex;
  flex-direction: column;
  justify-content: start;
}
.margin-10 {
  margin-top: 10px;
}
.prompt {
  display: -webkit-box;
  -webkit-line-clamp: 10;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
:deep(.el-button--primary) {
  span {
    color: #fff !important;
  }
}
:deep(.el-button--danger) {
  span {
    color: #fff !important;
  }
}
.table {
  height: 86vh;
}
.addmodel {
  position: absolute;
  top: 90px;
  right: 40px;
}
.option {
  display: flex;
}
</style>
